Skip to content

后端传递过来的图片是byte[]字节流格式,需要携带token才能获取到,像微信小程序的二维码、Activiti的图片流程图等数据都会用到,访问时设置responseType: "arraybuffer",再转换成base64格式直接显示。

javascript
view(id) {
    var scene="xx"
    this.$http({
            url: this.$http.adornUrl('xxxx'),
            method: 'post',
            data: {
                 'scene': scene
             },
            responseType: "arraybuffer", // 关键 设置 响应类型为二进制流
            }).then(function (res) {  // 将后台的图片二进制流传华为base64
               return 'data:image/png;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''));
            }).then(data=>{
            this.imageurl=data; // data即为图片地址
        })    
}

在封装的vue中使用如下:

javascript
export const exportPngApi = (definitionId) => {
    return request({
        url: `/api/admin/v1/process-definition/export/png/${definitionId}`,
        responseType: "arraybuffer",
        method: "GET"
    })
}

const clickExportPng = async id => {
  const res = await exportPngApi(id)
  imgUrl.value = 'data:image/png;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
  imgDialogVisible.value = true
}